<template>
  <a-pagination
    size="small"
    :total="pageInfo.total"
    :page-size="pageInfo.pageSize"
    :current="pageInfo.pageNo"
    show-size-changer
    show-quick-jumper
    @change="changePageNo"
    @showSizeChange="showSizeChange"
  />
</template>
<script>
export default {
  props: {
    pageInfo: {
      type: Object,
      default () {
        return {
          total: 0,
          pageSize: 15,
          pageNo: 1
        }
      }
    }
  },
  data () {
    return {

    }
  },
  watch: {
    pageInfo: {
      handler (val) {
        console.log(val, 'pageInfo')
      },
      immediate: true
    }
  },
  methods: {
    changePageNo (page, pageSize) {
      this.$emit('change', { page, pageSize })
    },
    showSizeChange (current, size) {
      this.$emit('sizechange', { current, size })
    }
  }
}
</script>
